<h:panelGroup xmlns:p='http://primefaces.org/ui'
              xmlns:f='http://java.sun.com/jsf/core'
              xmlns:h='http://java.sun.com/jsf/html' styleClass='IMRol' id='IMRol'><p:growl/>

<p:toolbar styleClass='toolBar'>

<p:toolbarGroup style='width:100%'>

  <p:commandButton icon='ui-icon-person' title='Gestionar Rol' value='Rol' actionListener='#{IMRol.uiFind}' update='@(.IMRol)' style='width:70px' rendered='#{IMRol.form}'/>

  <p:commandButton icon='ui-icon-left' title='Atras'   actionListener='#{IMRol.uiForm}'  update='@(.IMRol)' rendered='#{!IMRol.form}' process='@this'/>

  <p:commandButton icon='ui-icon-del'  title='Borrar'  actionListener='#{IMRol.uiRemove}' update='@(.IMRol)' rendered='#{!IMRol.form}' style='margin-left:10px;margin-right:10px;float:right;border:none;background:transparent'/>

  <p:commandButton icon='ui-icon-save' title='Guardar' actionListener='#{IMRol.uiMerge}'  update='@(.IMRol)' rendered='#{!IMRol.form}' style='margin-left:10px;float:right;border:none;background:transparent'/>

  <p:commandButton icon='ui-icon-new'  title='Nuevo'   actionListener='#{IMRol.uiClean}'  update='@(.IMRol)' rendered='#{!IMRol.form}' style='margin-left:10px;float:right;border:none;background:transparent' process='@this'/>

</p:toolbarGroup>

</p:toolbar>


<h:panelGrid id='rol' columns='3' cellpadding='0' cellspacing='0' styleClass='align-top' width='100%' rendered='#{IMRol.form}'>

  <p:dataTable value='#{IMRol.lsHoja}' var='x' selectionMode='single' rowKey='#{x.id}' scrollWidth='330'

               emptyMessage='' filteredValue='#{IMRol.lsFiltered}' scrollable='false' scrollHeight='400'

               selection='#{IMRol.selectedHoja}' rowStyleClass="#{x.tipo == 0? 'rowSel' : null}">

    <p:ajax event='rowSelect' listener='#{IMRol.onTransaccionSelect}' process=':#{formId}:rol' update='@(.IMRol)'/>

    <p:column headerText='Codigo'      filterBy='#{x.codigo}' sortBy='#{x.codigo}' filterMatchMode='contains' filterStyleClass='columnFind' style='width: 90px'>

    <h:outputText value='#{x.codigo}'/></p:column>

    <p:column headerText='Transaccion' filterBy='#{x.nombre}' sortBy='#{x.nombre}' filterMatchMode='contains' filterStyleClass='columnFind'>

    <h:outputText value='#{x.nombre}'/></p:column>

  </p:dataTable>


  <p:panel header='Rol' style='border:none;padding:0' styleClass='rmvCorner'>

  <f:facet name='header'>

  <h:panelGrid columns='5' width='100%' cellpadding='1' cellspacing='0'>

    <p:inputText value='#{IMRol.nombre}' title='Crear / Modificar Carpeta' styleClass='xIn' style='width:100%; height:16px;margin:3px!important;'/>

    <p:commandButton icon='ui-icon-plus' title='Crear carpeta' style='border:none;float:right' actionListener='#{IMRol.createFolder}' update='@(.IMRol)'/>

    <p:commandButton icon='ui-icon-check' title='Modificar carpeta' style='border:none;float:right' actionListener='#{IMRol.updateFolder}' update='@(.IMRol)'/>

    <p:commandButton icon='ui-icon-document' title='Limpiar' actionListener='#{IMRol.cleanTree}' update='@(.IMRol)' style='border:none;float:right'/>

    <p:commandButton icon='ui-icon-disk' title='Guardar Rol' actionListener='#{IMRol.mergeTree}' update='@(.IMRol)' style='border:none;float:right'/>

  </h:panelGrid>

  </f:facet>


  <p:tree id='tree' value='#{IMRol.root}' var='node' selectionMode='single' selection='#{IMRol.selectedNode}'

          style='border:none;height:100%' dynamic='true'>

    <p:ajax event='select' update=':#{formId}:rol' listener='#{IMRol.onNodeSelect}'/>

    <p:treeNode type='folder' expandedIcon='ui-icon-folder-open' collapsedIcon='ui-icon-folder-collapsed'>

    <h:outputText value='#{node.nombre}'/></p:treeNode>


    <p:treeNode type='document' icon='ui-icon-gear'>

    <h:outputText value='#{node.codigo} - #{node.nombre}'/></p:treeNode>

  </p:tree>

  </p:panel>

</h:panelGrid>


<p:contextMenu for='tree'>

  <p:menuitem value='Cortar' update='tree' actionListener='#{IMRol.cutNode}' icon='ui-icon-scissors'/>

  <p:menuitem value='Pegar' update='tree' actionListener='#{IMRol.pasteNode}' icon='ui-icon-clipboard'/>

  <p:menuitem value='Borrar' update='rol' actionListener='#{IMRol.deleteNode}' icon='ui-icon-close'/>

</p:contextMenu>


<h:panelGroup styleClass='bean' rendered='#{!IMRol.form}'>

<p:fieldset id='IMRolForm' styleClass='ui-shadow ui-Form' rendered='#{IMRol.dialog}'>

  <p:toolbar styleClass='toolBar'>

  <p:toolbarGroup style='width: 100%; height: 15px'>

  <h:outputText value='CODIGO #{IMRol.entity.id}'/>


  <p:commandLink title='Cancelar'  actionListener='#{IMRol.uiDialog}'  update='@(.IMRol)'

                 styleClass='ui-dialog-titlebar-close' style='float: right'><span class='ui-icon ui-icon-closethick'/></p:commandLink>

  </p:toolbarGroup>

  </p:toolbar>


  <h:panelGrid columns='2' cellpadding='10'>

  <h:outputLabel value='Nombre'/>

  <p:inputText value='#{IMRol.entity.nombre}' style='width:250px' styleClass='xIn'/>

  </h:panelGrid>

</p:fieldset><p:draggable for='IMRolForm'/>


<p:dataTable value='#{IMRol.lsEntity}' var='x' paginator='true' paginatorPosition='bottom' rows='15' rowKey='#{x.id}'  emptyMessage=''

             paginatorAlwaysVisible='false' selectionMode='multiple' selection='#{IMRol.selEntity}' filteredValue='#{IMRol.lsFiltered}'>

  <p:ajax event='rowSelect' update='@(.IMRol)'/>


  <p:column style='width:18px' rendered='#{not empty IMRol.lsEntity}'>

  <p:commandButton icon='ui-icon-edit' title='Editar' actionListener='#{IMRol.uiEdit}'  update='@(.IMRol)'

                   style='width:18px;height:18px;border:none;float:right;background:transparent' rendered='#{x.id == IMRol.selEntity[0].id}'/>

  </p:column>


  <p:column headerText='Codigo' filterBy='#{x.id}' sortBy='#{x.id}' filterStyleClass='columnFind' style='width:10px;height:20px'>

  <h:outputText value='#{x.codigo}'/></p:column>


  <p:column headerText='Nombre' filterBy='#{x.nombre}' sortBy='#{x.nombre}' filterStyleClass='columnFind' style='height:20px'>

  <h:outputText value='#{x.nombre}'/></p:column>

</p:dataTable>

</h:panelGroup>

</h:panelGroup>